<template>
  <div class="news">
    <h2>这是新闻组件</h2>

    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :id="news.id">
        <!-- 第一种写法 -->
        <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.tite}&content=${news.content}`">{{ news.tite }}
        </RouterLink> -->

        <!-- 第二种写法 -->
        <RouterLink :to="{
          name: 'detail',
          query: {
            id: news.id,
            title: news.tite,
            content: news.content
          }
        }"> {{ news.tite }}</RouterLink>

      </li>
    </ul>

    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>


  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import { RouterLink, RouterView } from "vue-router";

const newsList = reactive([
  { id: '1111', tite: 'news标题1', content: 'hahhahaha' },
  { id: '22222', tite: 'news标题2', content: 'hiehiehie' },
  { id: '33333', tite: 'news标题3', content: 'xixiixixix' }
])

</script>

<style lang="scss" scoped>
.new-content {
  background-color: pink;
}
</style>
